$height = 60px
$borderRadius = 10px
.header-bg-color {
  if hexo-config('color_scheme.common.headerMenuBackgroundColor') {
    background: convert(hexo-config('color_scheme.common.headerMenuBackgroundColor'));
  }  else {
    background: $color-primary
  }
  // backdrop-filter: saturate(120%) blur(5px); // 模糊效果
}
.header {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  align-items: center;
  height: $height;
  box-sizing: border-box;
  transition: all 0.3s;
  
  .header-content {
    width: calc(70% + 260px);
    // width: 100%; // 这样的话，空间会更大一点，logo和菜单会向两边靠齐
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .bars {
    }
    .navbar {
      height: 100%;
      display: flex;
      .menu {
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        .menu-item {
          display: flex;
          justify-content: center;
          a {
            color: $color-inner;
            display: block;
            overflow: hidden;
            text-align: center;
            width: 100%;
            height: 100%;
            font-size: 1em;
            word-break:break-all;
            i {
              transform: scale(0.8);
            }
            .arrow {
              transform: scale(0.8);
              margin-left: -3px;
              transition: all 0.3s;
            }
          }
          list-style: none;
          height: 100%;
          line-height: $height;
          padding: 0 10px;
          transition: background-color 0.3s;
          &:after {
            content: "";
            width: 0;
            height: 3px;
            background: orangered;
            position: absolute;
            bottom: 0;
            left: 0;
            transition: all 0.5s ease 0s;  
          }
          &:hover {
            background-color: rgba(0, 0, 0, 0.2);
            &:after {
              width: 100%;  
            }
            .arrow {
              transform: scale(0.8) rotate(180deg);
            }
            .sub-menu {
              padding-top: 5px;
              height: auto; 
              transform: translateY(0);
              opacity: 1;
              a:hover {
                transition: background-color 0.3s;
                background-color: rgba(0, 0, 0, 0.2);
                text-decoration: underline;
              }
            }
          }
          .sub-menu {
            position: absolute;
            top: 100%;
            left: calc((140px - 100%) / -2);
            border-radius: $borderRadius;
            height: 0;
            transition: all 0.3s;
            overflow: hidden;
            transform: translateY(30px);
            transition: all 0.3s;
            opacity: 0;
            li {
              if hexo-config('color_scheme.common.headerMenuBackgroundColor') {
                background: convert(hexo-config('color_scheme.common.headerMenuBackgroundColor'));
              }  else {
                background: $color-primary
              }
              width: 140px;
              text-align: center;
              line-height: 45px;
              &:first-child {
                overflow: hidden;
                border-top-left-radius: $borderRadius;
                border-top-right-radius: $borderRadius;
              }
            }
          }
        }
      }
    }
  }

  .blog-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    white-space: nowrap;
    margin-left: 20px;
    .avatar {
      border-radius: 50%;
      overflow hidden;
      width: 35px;
      height: 35px;
    }
    img {
      width: 100%;
      height: 100%;
    }
    a {
      color: $color-inner;
      margin-left: 5px;
      display: inline-block;
      font-size: 1.6em;
      font-family: "Comic Sans MS",cursive,LiSu,sans-serif;
      text-decoration: none;
      // overflow: hidden;
      // text-overflow:ellipsis; white-space: nowrap;
      // width: 170px;
    }  
  }
  #he-plugin-simple {
    width: 100px;
    margin-right: 60px!important;
    .s-sticker-tmp,
    .s-sticker-city {
      color: $color-inner!important;  
    }
  }
}
@media (min-width: 992px) { 
  .bars {
    display: none;  
  }
}
@media (max-width: 992px) {
  .header .header-content { 
    width: 100%!important;
  }
  .menu {
    display: none!important;
  }
  .bars {
    display: block;  
  }
  .header {
    padding: 0 20px;
  }
  .github-corner {
    display: none;
  }
  .header {
    #he-plugin-simple {
      margin-right: 0;
    }
  }
  .header .blog-title {
    if hexo-config('weather.on') {
      margin-left: 150px;
    }
  }
}
@media (max-width: 551px) {
  .header {
    #he-plugin-simple {
      display: none;
    }
    .blog-title { 
      margin-left: 0;  
      .avatar {
        width: 25px;
        height: 25px;  
      }
    }
  }
}
// @media (max-width: 982px) and (min-width: 551px) {
//   .header {
//     padding: 0 60px 0 20px;
//   }
// }
